<template>
    <view>
        <nav-bar fontColor="#fff"
                 :bgColor="['#63B9F2','#63B9F2']">
        </nav-bar>
        <view>
            <div class=" u-flex-col login_box">
                <div class='login_title text_left'>教师登录</div>
                <view class="login_box">
                    <view class="input_box u-flex">
                        <u-input style="flex:1;"
                                 :border="border"
                                 placeholder="请输入账号 "
                                 v-model="username"
                                 placeholder-class="placeholder_class"
                                 type="text"></u-input>
                    </view>
                    <view class="input_box u-flex">
                        <u-input style="flex:1;"
                                 :border="border"
                                 placeholder="请输入密码"
                                 v-model="password"
                                 type="password"></u-input>
                    </view>

                </view>
            </div>
            <view class="btn_box">
                <u-button @click="onLoginClick"
                          type="primary"
                          :disabled='username.length==0&&password.length==0'
                          :ripple="true"
                          shape="circle"> 登入 </u-button>
            </view>
        </view>
    </view>
</template>

<script>
import inputList from '@/components/inputList'

export default {
    data() {
        return {
            password: '',
            username: '',
            customStyle: {
                width: 'calc(100%-60rpx)',
                padding: '5rpx 10rpx',
                color: '#333',
                height: '100rpx',
                background: '#F5F5F5',
                borderRadius: '50rpx',
            },
        }
    },
    components: {
        inputList
    },
    watch: {
        account(val) {
            this.hidePassword = true
            let phoneReg = /^[1][2,3,4,5,6,7,8,9][0-9]{9}$/

            if (val.length > 0 && (val.length < 11)) {
                this.accountFail = true
            } else {
                if (!isNaN(val) && !phoneReg.test(val)) {
                    this.accountFail = true
                } else {
                    this.accountFail = false
                }
            }
        },
        password(val) {
            this.password = val
            if (this.password.length < 6 && this.password.length > 0) {
                this.passwordFail = true
            } else {
                this.passwordFail = false
            }
        }
    },
    onLoad() {

    },
    methods: {
        onLoginClick() {
            uni.showLoading({
                title: '',
                mask: true,
            })
            let sessionInfo = uni.getStorageSync('sessionInfo')
            let config = { userName: this.username, password: this.password, openId: sessionInfo.openid, Appid: this.$appId, unionId: sessionInfo.unionid }
            // {"sessionKey":"qEsJyHTmdyxvk7HdFqbs6A==","openid":"o6EWt5DfUGogvAXFkXa8ExkUZcE8","unionid":"oWpm558xVY4Jt8dbsNK0EH-koSEo"}
            this.$api.teacherLogin(config, res => {
                console.log(res);
                uni.setStorageSync('token', res.data);

                setTimeout(() => {
                    uni.setStorageSync('loginType', 'teacher')
                    this.$goto('reLaunch', '/pages/timeimagesles/timeimagesles')

                    // _this.$goto('reLaunch', '/pages/index/index')
                }, 500);
            })
            // if (this.merchantLogin) {
            //     this.$api.teacherLogin(config, res => {
            //         if (res.code === 0) {
            //             this.$interactive.toast('登陆成功')
            //             uni.setStorageSync('token', res.data.token)
            //             uni.setStorageSync('merchantLogin', true)
            //             uni.switchTab({
            //                 url: '/pages/exchange/exchange'
            //             })
            //         }
            //     })
            // }

        },


    }
}
</script>

<style lang="scss" scoped>
@import "@/common/scss/common.scss";
.login_box {
    padding: 32rpx;
    width: 100%;
    .login_title {
        color: #56546c;
        font-size: 48rpx;
        font-weight: bold;
        width: 100%;
        margin-top: 86rpx;
    }
    .input_box {
        height: 100rpx;
        display: flex;
        position: relative;
        justify-content: space-between;
        align-items: center;
        border-radius: 50rpx;
        padding: 0rpx 50rpx;
        transition: border 0.2s;
        background-color: #fff;
    }
    .input_box + .input_box {
        margin-top: 30rpx;
    }
}
.btn_box {
    padding: 0 64rpx;
}
.placeholder_class {
    font-size: 32rpx;
    color: #cccccc;
}
</style>
